<template>
  <div>
    <!-- 页脚 -->
    <div class="copyrights section">
      <div class="container">
        <div class="footer-distributed clearfix">
          <div class="footer-left">
            <span class="footer-links" style="font-size: 0">
              <router-link class="iconfont" :to="{ name: 'Home' }">
                &#xe627;首页<span class="iconfont">&#xe63b;</span>
              </router-link>
              <router-link
                class="iconfont"
                v-for="menu in menuList"
                :key="menu.id"
                :to="{ name: menu.router }"
              >
                {{ menu.title }}<span class="iconfont">&#xe63b;</span>
              </router-link>
              <a
                data-toggle="modal"
                data-target=".bs-example-modal-sm"
                href="javascript:0"
              >
                <span class="iconfont">&#xe660;&#xe63b;</span>
              </a>
              <a href="mailto:xiang9872@gmail.com">
                <span class="iconfont">&#xe60b;&nbsp;&nbsp;</span>
              </a>
            </span>
          </div>
          <div class="footer-right">
            <span class="footer-links" style="font-size: 0">
              <span style="font-size: 14px">©2021 </span>
              <a href="https://github.com/xiangjianan" target="_blank">
                xiangjianan
              </a>
              <a href="https://beian.miit.gov.cn" target="_blank">
                &nbsp;黑ICP备2021001307号-1
              </a>
            </span>
          </div>
        </div>
        <div
          class="modal fade bs-example-modal-sm"
          tabindex="-1"
          role="dialog"
          aria-labelledby="mySmallModalLabel"
        >
          <div
            class="modal-dialog modal-sm"
            style="width: 200px"
            role="document"
          >
            <div
              class="modal-content"
              style="width: 200px; border-radius: 10px; border: none"
            >
              <img
                src="../../public/static/img/wechat.png"
                style="width: 180px; margin: 10px"
                alt="微信：inMyLife2021"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="#notes" id="scroll-to-top" class="dmtop global-radius">
      <span class="icon iconfont" style="font-size: 23px">&#xe626;</span></a
    >
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      menuList: [],
    };
  },
  methods: {
    // 菜单列表：/api/home/menu
    getMenuList() {
      this.$http
        .menuList()
        .then((res) => {
          this.menuList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  // 生命周期  在created方法发起ajax请求
  created() {
    // 返回一个Axios实例化对象
    this.getMenuList();
  },
};
</script>

<style lang="css" scoped>
</style>
